<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>点击图⽚，图⽚向左翻转90度翻转</title>
</head>
<body>
  <img src="../img/桃花.jpg" alt="桃花" width="500"  onclick="revolve()">
  <script>
    var deg = -90
    function revolve() {
      var img = document.querySelector('img')
      // 04秒 旋转90度
      img.style.transform = 'rotate('+ deg + 'deg)'
      img.style.transition = 'all 0.4s linear'
      deg -= 90
    }
  </script>
</body>
</html>